<!-- 在App.vue总要写三个标签，template负责html，script负责js，style负责样式 -->
<template>
  <div class="person">
    <!-- <h1>name: {{ name }}</h1>
    <h2>age: {{ age }}</h2>
    <button @click="changeName">修改名字</button> -->
    <!-- ------------------------------------------------------------ -->
    <!-- <h1>名字：{{ test_one }}</h1>
    <h2>编号：{{ test_two }}</h2>
    <h3>车辆名称：{{ car.name }}</h3>
    <h4>车辆价格：{{ car.mn }}万</h4>
    <button @click="changeName">修改人物信息</button>
    <button @click="changeCar">修改车辆信息</button>
    <hr>
    <h5>游戏列表(练习v-for)</h5>
    <ul>
      <li v-for="value in games" :key="value.id">{{ value.name }}</li>
    </ul> -->
    <!-- <button @click="changefirst">修改游戏名称</button> -->
    <!-- --------------------------toRef与toRefs练习---------------------------- -->
     <!-- <h1>{{ name }}</h1>
     <h2>{{ age }}</h2>
     <button @click="changename">修改信息</button> -->
    <!-- --------------computed计算属性------------------ -->
    姓：<input type="text"> <br>
    名：<input type="text"> <br>
  </div>
</template>



<script>//加上setup就是语法糖，自动返回，但是组件名要另外写，通过name属性来设置
import { reactive, ref, toRef, toRefs } from 'vue'
//js
  export default {
    name: 'Preson',
    setup() {
      // let name = ref('张三')
      // const age = 18
      // const tel = '13800000000'
      
      // function changeName() {
      //   name.value = '李四'
      //   console.log(name.value)
      // }
      // return { name, age, changeName }
      /* ---------------------接下来联系响应式数据------------------------------ */
      // let test_one = ref('张三')
      // let test_two = ref(2394921364)
      // let car = reactive({
      //   name: '劳斯莱斯',
      //   mn: 1000
      // })

      // let games = reactive([
      //   {id: '1', name: '三角洲'},
      //   {id: '2', name: '象棋'},
      //   {id: '3', name: '王者荣耀'}
      // ])

      // function changeName() {
      //   test_one.value = '李四'
      //   test_two.value = 238764817
      // }

      // function changeCar() {
      //   car.name = '法拉利'
      //   car.mn += 10
      // }

      // function changefirst() {
      //   games[0].name = '三角洲行动'
      // }
      // <!-- --------------------------toRef与toRefs练习---------------------------- -->
      // let person = reactive({
      //   name: 'chengxun',
      //   age: 20
      // })
      // let {name, age} = toRefs(person)
      // /* 
      // 之所以要这样写是因为
      // let {name, age} = person
      // 他实际上是
      // let name = person.name
      // let age = person.age
      // 这样数据不是响应式的，会出翔问题，故而要加上toRefs批量转换
      // */
      // function changename() {
      //   name.value += 'test ',
      //   age.value += 1
      //   console.log(name, age)
      // }
      /* ------------------------------------------computed计算属性----------------------------- */

      return {}
    }
  }
</script>



<style scoped> 
  .person {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
</style>
